<template>
  <div class="project_display">
    <QxHead @showModal="showMenuModal"></QxHead>
    <Menu :showModal="showModalFlag" @handleHideModal="handleHideModal" @handleChangeLan="handleChangeLan"/>
    <div class="project_display_bg" :style="{backgroundImage: yunqiBg}">
    </div>
    <div class="display">
      <div class="title">{{$i18n.messages[lang].projectDisplay}}</div>
      <swiper loop auto height="4.5rem" :duration="800" style="padding:0 .28rem" dots-position="center">
        <swiper-item  class="swiper-demo-img" v-for="(item, index) in swiperList" :key="index">
          <a @click="preview(item.img)" :href="item.url?item.url:'#'" style="display:block;height:4.5rem;width:100%;backgroundSize:100%" :style="{backgroundImage: 'url(' +item.img+ ')'}"></a>
        </swiper-item>
      </swiper>
    </div>
    <div class="project_intro">
      <div class="project_title">{{$i18n.messages[lang].projectIntro}}</div>
      <div class="project_info">
        {{$i18n.messages[lang].intro1}}
      </div>
      <div class="btn-more" v-if="!isMore" @click="isMore = true">
        <p>more</p>
        <img src="../images/arrow_down.png" alt="">
      </div>
      <div v-else class="project_info" style="margin-top: .2rem;">
        {{$i18n.messages[lang].intro2}}
        <div class="btn-more" style="transform: rotate(180deg);margin-top: 0;" @click="isMore = false">
          <img src="../images/arrow_down.png" alt="">
        </div>
      </div>
    </div>
    <div class="main_estate">
      <div class="title">{{$i18n.messages[lang].newUnit}}</div>
      <div class="estate_type">
        <swiper loop auto height="13rem" :duration="800" style="padding:0 .28rem" dots-position="center">
          <swiper-item  class="swiper-demo-img" v-for="(item, index) in swiper1List" :key="index">
            <a @click="preview1(item.img)" :href="item.url?item.url:'#'" style="display:block;height:13rem;width:100%;backgroundSize:100%" :style="{backgroundImage: 'url(' +item.img+ ')'}"></a>
          </swiper-item>
        </swiper>
        <!--<img src="../images/estate_type.png" alt="">-->
      </div>
    </div>
    <div class="project_detail">
      <div class="project_address">
        <p>
          <img src="../images/location_white.png" alt="">
          <span>{{$i18n.messages[lang].projectAddress}}：</span>
        </p>
        <p>{{$i18n.messages[lang].addressDetail}}</p>
        <p><img src="../images/estate_map.jpg" alt=""></p>
      </div>
      <div class="project_tel">
        <p>
          <img src="../images/phone_white.png" alt="">
          <span>{{$i18n.messages[lang].salesHotline}}：</span>
        </p>
        <p>{{$i18n.messages[lang].line1}}</p>
        <p>{{$i18n.messages[lang].line2}}</p>
      </div>
      <div class="ercode">
        <p><img src="../images/yunqi_ercode.jpeg" alt=""></p>
        <p>{{$i18n.messages[lang].focus}}</p>
      </div>
    </div>
    <BottomInfo />
  </div>
</template>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?0c6b7133f8b076c80f30ef205bddbfab";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
  import { SwiperItem, Swiper } from 'vux'
  import BottomInfo from "./common/bottomInfo";
  import QxHead from "./common/qxHead";
  import Menu from "./common/menu";

  let CONSTANT = require('../../wechat/static/constant/constant.js'),
    common = require("../../wechat/static/common/common.js"),
    wsService = require("../../wechat/static/common/wechat-jsdk.js");

  export default {
    components: {
      SwiperItem,
      Swiper,
      BottomInfo,
      QxHead, Menu
    },
    data() {
      return {
          lang: "",
        showModalFlag: false,
        yunqiBg: 'url(https://qiaoxin.oss-cn-shenzhen.aliyuncs.com/h5/projectDisplay.png)',
        swiperList: [],
        swiper1List: [],
        isMore: false
      }
    },
    mounted() {
        this.lang = this.$i18n.locale
      this.getSliderList(null, (res) => {
          res.data.map( item => {
              this.swiperList.push({
                  url: 'javascript:',
                  img: 'https://qiaoxin.oss-cn-shenzhen.aliyuncs.com'+item.image,
                  title: "1333"
              })
          })
      })
      this.getSliderList({index: 2}, (res) => {
          res.data.map( item => {
              this.swiper1List.push({
                  url: 'javascript:',
                  img: 'https://qiaoxin.oss-cn-shenzhen.aliyuncs.com'+item.image,
                  title: "1333"
              })
          })
      })


    },
    methods: {
      showMenuModal(bool) {
        this.showModalFlag = bool
      },
      handleHideModal(bool) {
        this.showModalFlag = bool
      },
      getSliderList(param = null, callback = null) {
        let url = CONSTANT.URL.getSliderList;
        common.requestGetAjax(url, {}, Object.assign({page: '/projectDisplay.html'}, param), (res) => {
          if (res.code == 200) {
              callback && callback(res)
          }
        })
      },
      handleShowMore() {
        this.isMore = true
      },
      preview(img) {
          let arr = []
          this.swiperList.map( item => {
              arr.push(item.img)
          })
          wsService.default.previewImage(img, arr);
      },
      preview1(img){
          let arr = []
          this.swiper1List.map( item => {
              arr.push(item.img)
          })
          wsService.default.previewImage(img, arr);
      },
        handleChangeLan() {
            this.lang = this.$i18n.locale
        }
    }
  };
</script>
<style lang="less">
  .project_display {
    background-color: #f2f6fa;
    /*padding-bottom: 1.31rem;*/
    .project_display_bg {
      /*margin-bottom: .51rem;*/
      width: 100%;
      height: 3.14rem;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      text-align: center;
      img {
        width: 1.7rem;
        vertical-align: middle;
        margin-top: 1.51rem;
      }
    }

    .swiper-demo-img {
      a {
        -webkit-background-size: cover!important;
        background-size: cover!important;
        background-position: center;
        background-repeat: no-repeat;
      }
    }

    .display {
      padding: .75rem 0 .53rem 0;
      background-color:#f2f6fa;
      .title {
        margin-bottom: .6rem;
        text-align: center;
        color: #0154A6;
        font-size: .38rem;
        font-weight: bold;
      }
    }
    .project_intro {
      background-color: #fff;
      padding-top: .52rem;
      padding-bottom: .43rem;
      .project_title {
        text-align: center;
        font-size: .38rem;
        color: #2155A0;
        margin-bottom: .41rem ;
        font-weight: bold;
      }
      .project_info {
        padding: 0 .29rem;
        font-size: .27rem;
        color: #666;
        line-height: .42rem;
      }
      .btn-more {
        margin-top: .5rem;
        text-align: center;
        font-size: .27rem;
        color: #2155A0;
        img {
          width: .22rem;
          vertical-align: top;
          margin-top: .11rem;
        }
      }
    }
    .main_estate {
      padding-bottom: .6rem;
      .title {
        margin: .53rem 0 .47rem 0;
        color: #2155A0;
        font-size: .38rem;
        text-align: center;
        font-weight: bold;
      }
      .estate_type {
        text-align: center;
        img {
          width: 6.04rem;
        }
      }
    }
    .project_detail {
      background-color: #0054a2;
      padding: .74rem .7rem .51rem .7rem;
      color: #fff;
      font-size: .27rem;
      .project_address, .project_tel {
        p {
          margin-bottom: .1rem;
        }
        p:first-child {
          img {
            width: .26rem;
            vertical-align: middle;
          }
        }
      }
      .project_address {
        p{
          &:nth-child(3) {
            img {
              width: 6.1rem;
              margin-bottom: .3rem;
            }
          }
        }
      }
      .project_tel {
        margin-bottom: .64rem;
      }
      .ercode {
        text-align: center;
        p {
          img {
            width: 2.8rem;
            margin-bottom: .33rem;
            vertical-align: middle;
          }
          &:last-child {
            font-size: .21rem;
          }
        }
      }
    }
  }
</style>

